```html
<script setup>
  import * as colorPicker from "@zag-js/color-picker"
  import { normalizeProps, useMachine } from "@zag-js/vue"
  import { computed } from "vue"

  const service = useMachine(colorPicker.machine, {
    id: "1",
    defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
  })

  const api = computed(() => colorPicker.connect(service, normalizeProps))
</script>

<template>
  <div v-bind="api.getRootProps()">
    // ...
    <div v-bind="api.getPositionerProps()">
      <div v-bind="api.getContentProps()">
        <template v-if="api.format === 'rgba'">
          <div>
            <div>
              <span>R</span>
              <input v-bind="api.getChannelInputProps({ channel: 'red' })" />
            </div>

            <div>
              <span>G</span>
              <input v-bind="api.getChannelInputProps({ channel: 'green' })" />
            </div>

            <div>
              <span>B</span>
              <input v-bind="api.getChannelInputProps({ channel: 'blue' })" />
            </div>

            <div>
              <span>A</span>
              <input v-bind="api.getChannelInputProps({ channel: 'alpha' })" />
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
```
